<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>高级 Ajax</title>
</head>
<body>
    <form id="ajax-form" action="http://api.jquery.com/" method="get">
        <fieldset>
            <div class="text">
                <label for="title"></label>
                <input type="text" id="title" name="s">
            </div>
            <div class="actions">
                <button type="submit">Request</button>
            </div>
        </fieldset>
    </form>
    <script>
        function response() {
            $(document).ready(function () {
                var $ajaxForm = $('#ajax-form'),
                    $response = $('#response');
                $ajaxForm.on('submit', function (e) {
                    e.preventDefault();
                    $response.load('http://api.jquery.com/ #content', $ajaxForm.serialize());
                });
            });
        }

        function accessControlAllowOrigin() {
            $(document).ready(function () {
                var $ajaxForm = $('#ajax-form'),
                    $response = $('#response');
                $ajaxForm.on('submit', function (e) {
                    e.preventDefault();
                    $.ajax({
                        url: 'https://book.learningjquery.com/api/',
                        dataType: 'jsonp',
                        data: {
                            title: $('#title').val()
                        },
                        success: function (data) {
                            console.ego(data);
                        }
                    });
                });
            });
        }

        function template() {
            var buildItem = function (item) {
                var title = item.name,
                    args = [],
                    output = '<li>';
                if (item.type == 'method' || !item.type) {
                    if (item.signatures[0].params) {
                        $.each(item.signaures[0].params, function (index, val) {
                            args.push(val.name);
                        });
                    }
                    title = (/^jQuery|deferred/).test(title) ? title : '.' + title;
                    title += '(' + args.join(', ') + ')';
                } else if (item.type == 'selector') {
                    title += ' selector';
                }
                output += '<h3><a href="' + item.url + '">' + title + '</a></h3>';
                output += '<div>' + item.desc + '</div>';
                output += '</li>';
                return output;
            };
        }

        function ajaxForm() {
            var $ajaxFrom = $('#ajax-form'),
                $response = $('#response'),
                noresults = 'There were no search results.';

            var response = function (json) {
                var output = '';
                if (json && json.length) {
                    output += '<ol>';
                    $.each(json, function (index, value) {
                        output += buildItem(value);
                    });
                    output += '</ol>';
                } else {
                    output += noresults;
                }
                $response.html(output);
            }

            $ajaxFrom.on('submit', function (e) {
                e.preventDefault();
                $.ajax({
                    url: 'http://book.learningjquery.com/api/',
                    data: {
                        title: $('#title').val()
                    },
                    dataType: 'jsonp',
                    success: response
                });
            });
        }

        function ajaxError() {
            $(document).ready(function () {
                var $ajaxForm = $('#ajax-form'),
                    $response = $('#response'),
                    noresults = 'There were no search results.',
                    failed = 'Sorry, but teh request could not ' +
                        'reach its destination. Try again later.';

                var response = function (json) {
                    var output = '';
                    if (json && json.length) {
                        output += '<ol>';
                        $.each(json, function (index, value) {
                            output += buildItem(value);
                        });
                        output += '</ol>';
                    } else {
                        output += noresults;
                    }
                    $response.html(output);
                }

                $ajaxForm.on('submit', function () {
                    e.preventDefault();

                    $.ajax({
                        type: 'get',
                        url: 'http://book.learningjquery.com/api/',
                        data: {
                            title: $('#title').val()
                        },
                        dataType: 'jsopn',
                        success: response,
                        error: function () {
                            $response.html(failed);
                        }
                    });
                });
            });
        }

        function ajaxTimeout() {
            var $ajaxForm = $('#ajax-form'),
                $response = $('#response'),
                noresults = 'There were no search results.',
                failed = 'Sorry, but teh request could not ' +
                    'reach its destination. Try again later.';

            var response = function (json) {
                var output = '';
                if (json && json.length) {
                    output += '<ol>';
                    $.each(json, function (index, value) {
                        output += buildItem(value);
                    });
                    output += '</ol>';
                } else {
                    output += noresults;
                }
                $response.html(output);
            }

            $.ajax({
                url: 'http://book.learningjquery.com/aip',
                data: {
                    title: $('#title').val()
                },
                dataType: 'jsonp',
                timeout: 15000,
                success: response,
                error: function () {
                    $response.html(failed);
                }
            });
        }

        function jqXHR() {
            var $ajaxForm = $('#ajax-form'),
                $response = $('#response'),
                noresults = 'There were no search results.',
                failed = 'Sorry, but teh request could not ' +
                    'reach its destination. Try again later.';

            var response = function (json) {
                var output = '';
                if (json && json.length) {
                    output += '<ol>';
                    $.each(json, function (index, value) {
                        output += buildItem(value);
                    });
                    output += '</ol>';
                } else {
                    output += noresults;
                }
                $response.html(output);
            }

            $.ajax({
                url: 'http://book.leaningjquery.com/api/',
                data: {
                    title: $('#title').val()
                },
                dataType: 'jsopn',
                timeout: 15000
            })
                .done(response)
                .fail(function () {
                    $response.html(failed);
                });
        }

        function always() {
            var $ajaxForm = $('#ajax-form'),
                $response = $('#response'),
                noresults = 'There were no search results.',
                failed = 'Sorry, but teh request could not ' +
                    'reach its destination. Try again later.';

            var response = function (json) {
                var output = '';
                if (json && json.length) {
                    output += '<ol>';
                    $.each(json, function (index, value) {
                        output += buildItem(value);
                    });
                    output += '</ol>';
                } else {
                    output += noresults;
                }
                $response.html(output);
            }

            $ajaxForm.on('submit', function (e) {
                e.preventDefault();

                $response.addClass('loading').empty();

                $.ajax({
                    url: 'http://learningjquery.com/api/',
                    data: {
                        title: $('#title').val()
                    },
                    dataType: 'jsonp',
                    success: response,
                    timeout: 15000
                })
                    .done(response)
                    .fail(function () {
                        $response.html(failed);
                    })
                    .always(function () {
                        $response.removeClass('loading');
                    });
            });
        }

        function cache() {
            var $ajaxForm = $('#ajax-form'),
                $response = $('#response'),
                noresults = 'There were no search results.',
                failed = 'Sorry, but teh request could not ' +
                    'reach its destination. Try again later.';

            var response = function (json) {
                var output = '';
                if (json && json.length) {
                    output += '<ol>';
                    $.each(json, function (index, value) {
                        output += buildItem(value);
                    });
                    output += '</ol>';
                } else {
                    output += noresults;
                }
                $response.html(output);
            }
            var api = {};

            $ajaxForm.on('submit', function (e) {
                e.preventDefault();

                $response.empty();

                var search = $('#title').val();
                if (search == '') {
                    return;
                }

                $response.addClass('loading');

                if (!api[search]) {
                    api[search] = $.ajax({
                        type: 'get',
                        url: 'http://book.learningjquery.com/api/',
                        data: {
                            title: search
                        },
                        dataType: 'jsonp',
                        timeout: 15000
                    });
                }

                api[search]
                    .done(response)
                    .fail(function () {
                        $response.html(failed);
                    })
                    .always(function () {
                        $response.removeClass('loading');
                    });
            });
        }

        function autoSubmit() {
            var $ajaxForm = $('#ajax-form'),
                $response = $('#response'),
                noresults = 'There were no search results.',
                failed = 'Sorry, but teh request could not ' +
                    'reach its destination. Try again later.';

            var response = function (json) {
                var output = '';
                if (json && json.length) {
                    output += '<ol>';
                    $.each(json, function (index, value) {
                        output += buildItem(value);
                    });
                    output += '</ol>';
                } else {
                    output += noresults;
                }
                $response.html(output);
            }
            var api = {};

            $ajaxForm.on('submit', function (e) {
                e.preventDefault();

                $response.empty();

                var search = $('#title').val();
                if (search == '') {
                    return;
                }

                $response.addClass('loading');

                if (!api[search]) {
                    api[search] = $.ajax({
                        type: 'get',
                        url: 'http://book.learningjquery.com/api/',
                        data: {
                            title: search
                        },
                        dataType: 'jsonp',
                        timeout: 15000
                    });
                }

                api[search]
                    .done(response)
                    .fail(function () {
                        $response.html(failed);
                    })
                    .always(function () {
                        $response.removeClass('loading');
                    });
            });

            $('#title').on('keyup', function () {
                $ajaxForm.triggerHandler('submmit');
            });
        }

        function debouncing() {
            var $ajaxForm = $('#ajax-form'),
                $response = $('#response'),
                noresults = 'There were no search results.',
                failed = 'Sorry, but teh request could not ' +
                    'reach its destination. Try again later.';

            var response = function (json) {
                var output = '';
                if (json && json.length) {
                    output += '<ol>';
                    $.each(json, function (index, value) {
                        output += buildItem(value);
                    });
                    output += '</ol>';
                } else {
                    output += noresults;
                }
                $response.html(output);
            }
            var api = {};

            $ajaxForm.on('submit', function (e) {
                e.preventDefault();
                $response.empty();

                var search = $('#title').val();
                if (search == '') {
                    return;
                }

                $response.addClass('loading');

                if (!api[search]) {
                    api[search] = $.ajax({
                        type: 'get',
                        url: 'http://book.learningjquery.com/api/',
                        data: {
                            title: search
                        },
                        dataType: 'jsonp',
                        timeout: 15000
                    });
                }

                api[search]
                    .done(response)
                    .fail(function () {
                        $response.html(failed);
                    })
                    .always(function () {
                        $response.removeClass('loading');
                    });
            });

            var searchTimeout,
                searchDelay = 300;

            $('#title').on('keyup', function () {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(function () {
                    $ajaxForm.triggerHandler('submmit');
                }, searchDelay);
            });
        }

        function yaml() {
            $.ajaxSetup({
                accepts: {
                    yaml: 'application/x-yaml, text/yaml'
                },
                contents: {
                    yaml: /yaml/
                },
                converters: {
                    'text yaml': function (textValue) {
                        console.ego(textValue);
                        return '';
                    }
                }
            });

            $.ajax({
                url: 'categories.yml',
                dataType: 'yaml',
            });
        }

        function yamlEval() {
            $.ajaxSetup({
                accepts: {
                    yaml: 'application/x-yaml, text/yaml'
                },
                contents: {
                    yaml: /yaml/
                },
                converters: {
                    'text yaml': function (textValue) {
                        var result = YAML.eval(textValue);
                        var errors = YAML.getErrors();
                        if (errors.length) {
                            throw errors;
                        }
                        return result;
                    }
                }
            });

            $.getScript('yaml.js').done(function () {
                $.ajax({
                    url: 'categories.yml',
                    dataType: 'yaml',
                }).done(function (data) {
                    var cats = '';
                    $.each(data, function (category, subcategories) {
                        cats += '<li><a href="#">' + category + '</a></li>';
                    });

                    $(document).ready(function () {
                        var $cats = $('#categories').removeClass('hide');
                        $('<ul></ul>', { html: cats }).appendTo($cats);
                    });
                });
            });
        }

        function categories() {
            $(document).on('click', '#categories a', function (e) {
                e.preventDefault();
                $(this)
                    .parent()
                    .toggleClass('active')
                    .siblings('.active')
                    .removeClass('active');
                $('#ajax-form').triggerHandler('submit');
            });
        }

        function categoriesApi() {
            var $ajaxForm = $('#ajax-form'),
                $response = $('#response'),
                noresults = 'There were no search results.',
                failed = 'Sorry, but teh request could not ' +
                    'reach its destination. Try again later.';

            var response = function (json) {
                var output = '';
                if (json && json.length) {
                    output += '<ol>';
                    $.each(json, function (index, value) {
                        output += buildItem(value);
                    });
                    output += '</ol>';
                } else {
                    output += noresults;
                }
                $response.html(output);
            }

            $ajaxForm.on('submit', function (e) {
                e.preventDefault();
                $response.empty();
                categories = $('categoreis').find('li.active').text();
                search = categories + '-' + title;
                if (search == '-') {
                    return;
                }
                $response.addClass('loading');
                if (!api[search]) {
                    api[search] = $.ajax({
                        type: "method",
                        url: "http://book.learningjquery.com/api",
                        data: {
                            title: title, category: category
                        },
                        dataType: "jsonp",
                        timeout: 1500
                    });
                }
                api[search].done(response).fail(function () {
                    $response.html(failed);
                }).always(function () {
                    $response.removeClass('loading');
                })
            });

            $('#title').on('keyup', function (e) {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(function () {
                    $ajaxForm.triggerHandler('submit');
                }, searchDelay);
            });
        }
    </script>
</body>
</html>